<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Progress - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Progress</h1>

            <div class="uk-width-1-2@m">

                <p>Indeterminate</p>
                <progress class="uk-progress"></progress>

                <p>Determinate</p>
                <progress class="uk-progress" value="40" max="100"></progress>

                <p>With Text</p>
                <progress class="uk-progress" value="45" max="100">45%</progress>

                <p>100%</p>
                <progress class="uk-progress" value="100" max="100"></progress>

                <p>Updating</p>
                <progress id="js-progressbar" class="uk-progress" max="100"></progress>

            </div>

        </div>

        <script>
            const {ready, $} = UIkit.util;

            ready(() => {

                const bar = $('#js-progressbar');
                const animate = setInterval(() => {

                    bar.value += 10;

                    if (bar.value >= bar.max) {
                        clearInterval(animate);
                    }

                }, 1000);

            });

        </script>

    </body>
</html>
